<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="csrf-token" content="{{ csrf_token() }}">
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
	<link rel="stylesheet" href="{{URL::asset('vendor/element-ui/lib/theme-chalk/index.css')}}">
	<link rel="stylesheet" href="{{URL::asset('vendor/element-ui/lib/theme-chalk/reset.style.css')}}">
	<script src="{{URL::asset('js/jquery.min.js')}}"></script>
	<script src="{{URL::asset('js/echarts.js')}}"></script>
	<script src="{{URL::asset('js/echarts-theme-candf.js')}}"></script>
	<script src="{{URL::asset('js/html2canvas.js')}}"></script>
	<script src="{{URL::asset('vendor/element-ui/ext/vue.js')}}"></script>
	<script src="{{URL::asset('vendor/element-ui/lib/index.js')}}"></script>
	<title>巡场日报</title>
	<style media="screen">
		body{
			background-color: #FFF;
		}
		#main .el-card-box .el-card-header .el-button{
			left:0;
		}
		#main .el-card-box .el-card-header .el-date-editor{
			width: 150px;position: absolute;right: 0;top: 0;
		}
		#main .el-card-box .el-card-header .el-date-editor .el-input__inner{
			line-height: 32px;height: 32px;
		}
		#main .el-card-box .el-card-header .el-date-editor .el-input__icon{
			line-height: 32px;
		}
		.table td, .table th {
			padding: 0.25rem;
		}
		#main .el-card-box .el-card-body .col-header {
			font-weight:500;
			font-family:"Microsoft YaHei";
			font-size:20px;
			margin-bottom: 32px;
		}
		#main .chart_footer{
			height: 30px;line-height: 30px;
		}
		#export-img{
			display: none;
		}
		#main .el-card__body {
			background-color: #FFF;
		}
		#main .el-card__header {
			background-color: #C30D23;
		}
		#main .el-card__header .el-card-header h2{
			color:#FFF
		}
		#main .table thead th {
		    vertical-align: bottom;
		    border-bottom: 1px solid #c0c4cc;
		}
		#main .table td{
		    padding: .75rem;
		    vertical-align: top;
		    border-top: 1px solid #c0c4cc;
		}
		.table-bordered td, .table-bordered th{
			border: 1px solid #c0c4cc;
		}
	</style>
</head>
<body>
<img id="export-img" width="100%" height="100%" src="">
<div id="main">
<!-- start of all -->
<el-card class="el-card-box">
	<div slot="header" class="el-card-header">
		<h2 align="center">两校区巡场反馈</h2>
		<span id="export-btn-box">
		<el-button type="info" size="small" :disabled="canSaveAsPng" @click="downloadAsPng" plain>@{{btn_text}}</el-button>
		</span>
		<el-date-picker v-model="date" type="date" value-format="yyyy-MM-dd" @change="handlePickerChange">
    	</el-date-picker>
	</div>
	<div class="el-card-body">
		<el-row>
			<el-col :span="12">
				<h5 align="center" class="col-header">今日总计</h5>
				<table class="table table-hover table-condensed table-striped">
					<thead>
						<tr class="text-center">
							<th></th>
							<th>今日</th>
							<th>上周同日</th>
						</tr>
					</thead>
					<tbody>
						<tr class="text-center">
							<td>发现</td>
							<td>{{$Data['total']['find']}}</td>
							<td>{{$Data['total']['find_last']}}</td>
						</tr>
						<tr class="text-center">
							<td>处理</td>
							<td>{{$Data['total']['solve']}}</td>
							<td>{{$Data['total']['solve_last']}}</td>
						</tr>
						<tr class="text-center">
							<td>处理率</td>
							<td>{{$Data['total']['rate']}}%</td>
							<td>{{$Data['total']['rate_last']}}%</td>
						</tr>
					</tbody>
				</table>
			</el-col>
			<el-col :span="12">
				<div id="chart_0" style="width: 600px;height:300px;margin:0 auto;"></div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="8">
				<div id="chart_1" style="width: 300px;height:270px;margin:0 auto;"></div>
				<div id="chart_2" style="width: 300px;height:270px;margin:0 auto;"></div>
				<div class="chart_footer text-center">
					<el-radio @change="chartToggleShow"
						v-model="chart_type[0]" label="0">
						种类/是否处理
					</el-radio>
 					<el-radio @change="chartToggleShow"
						v-model="chart_type[0]" label="1">
						处理部门/是否处理
					</el-radio>
				</div>
			</el-col>
			<el-col :span="8">
				<div id="chart_3" style="width: 300px;height:270px;margin:0 auto;"></div>
				<div id="chart_4" style="width: 300px;height:270px;margin:0 auto;"></div>
				<div class="chart_footer text-center">
					<el-radio v-model="chart_type[1]" @change="chartToggleShow" label="0">
						种类/是否处理
					</el-radio>
 					<el-radio v-model="chart_type[1]" @change="chartToggleShow" label="1">
						处理部门/是否处理
					</el-radio>
				</div>
			</el-col>
			<el-col :span="8">
				<div id="chart_5" style="width: 300px;height:270px;margin:0 auto;"></div>
				<div id="chart_6" style="width: 300px;height:270px;margin:0 auto;"></div>
				<div class="chart_footer text-center">
					<el-radio v-model="chart_type[2]" @change="chartToggleShow" label="0">
						种类/是否处理
					</el-radio>
 					<el-radio v-model="chart_type[2]" @change="chartToggleShow" label="1">
						处理部门/是否处理
					</el-radio>
				</div>
			</el-col>
		</el-row>
		<el-row style="margin-top:30px;">
			<h3 class="text-center">今日短期问题</h3>
			<table class="table table-hover table-bordered table-condensed table-striped">
				<thead>
					<tr class="text-center">
						<th>序号</th>
						<th>校区</th>
						<th>问题类型</th>
						<th>问题描述</th>
						<th>是否解决</th>
						<th>归属处理部门/实际处理人</th>
						<th colspan="2">备注</th>
					</tr>
				</thead>
				<tbody>
					@foreach ($Data['campuses'][0]['problems'] as $c86 => $problem)
					<tr class="text-center">
						<td>{{$c86+1}}</td>
						<td>{{$problem['campus']}}</td>
						<td>{{$problem['problem_type']}}</td>
						<td class="text-left">{{$problem['ques_desc']}}</td>
						<td>
							@if($problem['is_handled'] == 1)
								<span class="text-success">是</span>
							@else
								<span class="text-warning">否</span>
							@endif
						</td>
						<td>{{$problem['depart_name']}} / {{$problem['admin_name']}}</td>
						<td class="text-left mark_{{$problem['id']}}">{{$problem['mark']}}</td>
						<td width="50">
							<el-button size="mini" icon="el-icon-edit-outline"
								type="primary" circle plain @click="editRow('{{$problem['mark']}}',{{$problem['id']}})">
							</el-button>
						</td>
					</tr>
					@endforeach
					@foreach ($Data['campuses'][1]['problems'] as $qc => $problem)
					<tr class="text-center">
						<td>{{$qc+sizeof($Data['campuses'][0]['problems'])+1}}</td>
						<td>{{$problem['campus']}}</td>
						<td>{{$problem['problem_type']}}</td>
						<td class="text-left">{{$problem['ques_desc']}}</td>
						<td>
							@if($problem['is_handled'] == 1)
								<span class="text-success">是</span>
							@else
								<span class="text-warning">否</span>
							@endif
						</td>
						<td>{{$problem['depart_name']}} / {{$problem['admin_name']}}</td>
						<td class="mark_{{$problem['id']}} text-left">{{$problem['mark']}}</td>
						<td width="50">
							<el-button size="mini" icon="el-icon-edit-outline"
								type="primary" circle plain @click="editRow('{{$problem['mark']}}',{{$problem['id']}})">
							</el-button>
						</td>
					</tr>
					@endforeach
					@foreach ($Data['campuses'][2]['problems'] as $qt => $problem)
					<tr class="text-center">
						<td>{{$qt+sizeof($Data['campuses'][0]['problems'])+sizeof($Data['campuses'][1]['problems'])+1}}</td>
						<td>{{$problem['campus']}}</td>
						<td>{{$problem['problem_type']}}</td>
						<td class="text-left">{{$problem['ques_desc']}}</td>
						<td>
							@if($problem['is_handled'] == 1)
								<span class="text-success">是</span>
							@else
								<span class="text-warning">否</span>
							@endif
						</td>
						<td>{{$problem['depart_name']}} / {{$problem['admin_name']}}</td>
						<td class="mark_{{$problem['id']}} text-left">{{$problem['mark']}}</td>
						<td width="50">
							<el-button size="mini" icon="el-icon-edit-outline"
								type="primary" circle plain @click="editRow('{{$problem['mark']}}',{{$problem['id']}})">
							</el-button>
						</td>
					</tr>
					@endforeach
				</tbody>
			</table>
		</el-row>
		<el-row>
			<h3 class="text-center">长期待跟进问题</h3>
			<table class="table table-hover table-bordered table-condensed table-striped">
				<thead>
					<tr class="text-center">
						<th>序号</th>
						<th>校区</th>
						<th>问题描述</th>
						<th>解决描述</th>
						<th>发现时间</th>
						<th>截至时间</th>
						<th>是否处理</th>
						<th>状态</th>
						<th>归属部门</th>
						<th>负责人</th>
						<th colspan="2">备注</th>
					</tr>
				</thead>
				<tbody>
					@foreach ($Data['campuses'][0]['long_problems'] as $c86l => $lp)
					<tr class="text-center">
						<td>{{$c86l+1}}</td>
						<td>{{$lp['campus']}}</td>
						<td class="text-left">{{$lp['ques_desc']}}</td>
						<td>{{$lp['handle_desc']}}</td>
						<td>{{$lp['created_at']}}</td>
						<td>{{$lp['end_date']}}</td>
						<td>
							@if($lp['is_handled'] == 1)
								<span class="text-success">是</span>
							@else
								<span class="text-warning">否</span>
							@endif
						</td>
						<td>
							@if($lp['is_handled'] == 1)
								<span class="text-success">已处理</span>
							@elseif(strtotime($lp['end_date'])<time())
								<span class="text-danger">逾期未处理</span>
							@else
								<span class="text-warning">待跟进</span>
							@endif
						</td>
						<td>{{$lp['depart_name']}}</td>
						<td>{{$lp['admin_name']}}</td>
						<td class="mark_{{$lp['id']}} text-left">{{$lp['mark']}}</td>
						<td width="50">
							<el-button size="mini" icon="el-icon-edit-outline"
								type="primary" circle plain @click="editRow('{{$lp['mark']}}',{{$lp['id']}})">
							</el-button>
						</td>
					</tr>
					@endforeach
					@foreach ($Data['campuses'][1]['long_problems'] as $qcl => $lp)
					<tr class="text-center">
						<td>{{$qcl + sizeof($Data['campuses'][0]['long_problems']) + 1}}</td>
						<td>{{$lp['campus']}}</td>
						<td class="text-left">{{$lp['ques_desc']}}</td>
						<td>{{$lp['handle_desc']}}</td>
						<td>{{$lp['created_at']}}</td>
						<td>{{$lp['end_date']}}</td>
						<td>
							@if($lp['is_handled'] == 1)
								<span class="text-success">是</span>
							@else
								<span class="text-warning">否</span>
							@endif
						</td>
						<td>
							@if($lp['is_handled'] == 1)
								<span class="text-success">已处理</span>
							@elseif(strtotime($lp['end_date'])<time())
								<span class="text-danger">逾期未处理</span>
							@else
								<span class="text-warning">待跟进</span>
							@endif
						</td>
						<td>{{$lp['depart_name']}}</td>
						<td>{{$lp['admin_name']}}</td>
						<td class="mark_{{$lp['id']}} text-left">{{$lp['mark']}}</td>
						<td width="50">
							<el-button size="mini" icon="el-icon-edit-outline"
								type="primary" circle plain @click="editRow('{{$lp['mark']}}',{{$lp['id']}})">
							</el-button>
						</td>
					</tr>
					@endforeach
					@foreach ($Data['campuses'][2]['long_problems'] as $qtl => $lp)
					<tr class="text-center">
						<td>{{$qtl + sizeof($Data['campuses'][0]['long_problems']) + sizeof($Data['campuses'][1]['long_problems']) + 1}}</td>
						<td>{{$lp['campus']}}</td>
						<td class="text-left">{{$lp['ques_desc']}}</td>
						<td>{{$lp['handle_desc']}}</td>
						<td>{{$lp['created_at']}}</td>
						<td>{{$lp['end_date']}}</td>
						<td>
							@if($lp['is_handled'] == 1)
								<span class="text-success">是</span>
							@else
								<span class="text-warning">否</span>
							@endif
						</td>
						<td>
							@if($lp['is_handled'] == 1)
								<span class="text-success">已处理</span>
							@elseif(strtotime($lp['end_date'])<time())
								<span class="text-danger">逾期未处理</span>
							@else
								<span class="text-warning">待跟进</span>
							@endif
						</td>
						<td>{{$lp['depart_name']}}</td>
						<td>{{$lp['admin_name']}}</td>
						<td class="mark_{{$lp['id']}} text-left">{{$lp['mark']}}</td>
						<td width="50">
							<el-button size="mini" icon="el-icon-edit-outline"
								type="primary" circle plain @click="editRow('{{$lp['mark']}}',{{$lp['id']}})">
							</el-button>
						</td>
					</tr>
					@endforeach
				</tbody>
			</table>
		</el-row>
	</div>
</el-card>

<el-dialog title="编辑备注" :visible.sync="dialog_show">
	<el-input type="textarea" :rows="5" placeholder="请输入内容"
		v-model="form.mark">
	</el-input>
	<div slot="footer" class="dialog-footer">
		<el-button size="small" @click="dialog_show = false">取 消</el-button>
		<el-button size="small" type="primary" @click="submitMark">确 定</el-button>
	</div>
</el-dialog>
<!-- end of all -->
</div></body>
<script type="text/javascript">
let main = new Vue({
	el:"#main",
	data:{
		canSaveAsPng:false,
		btn_text:"保存为日报图片",
		dialog_show:false,
		form:{
			_token:"{{ csrf_token() }}",
			id:"",mark:""
		},
		is_mobile:"{{$is_mobile}}",
		date:"{{$date}}",
		chart_type:["{{$chartType[0]}}","{{$chartType[1]}}","{{$chartType[2]}}"],
		charts:[],
		chartOpts:[{
			title:{
				text:"校区问题总数趋势",
				x:"center",y:0,
				textStyle:{
				    fontWeight:"500",
					fontFamily:"Microsoft YaHei",
					fontSize:"20"
				}
			},
			tooltip: {
				trigger: 'axis'
			},
			legend:{
				data:["C86总计：123","七彩总计：456"],
				x:"center",y:32
			},
			xAxis: {
		        boundaryGap: false,
				data: ['周一','周二','周三','周四','周五','周六','周日']
			},
			yAxis: {
				type: 'value'
			},
			series: [{
				name:'C86总计：123',
				type:'line',
				data:[12,20,5,6,7,9,8],
			},{
				name:'七彩总计：456',
				type:'line',
				data:[5,9,22,32,15,25,6],
			}]
		},{
		    title : {
		        text: 'C86校区',
				x:"center",y:0,
				textStyle:{
				    fontWeight:"500",
					fontFamily:"Microsoft YaHei",
					fontSize:"20"
				}
		    },
		    series:[{
	            type:'pie',
	            radius:'40%',
	            center:['50%','50%'],
	            data:[
	                {value:1, name:'环境问题\n(未处理)\n1,12%'},
	                {value:14, name:'环境问题\n(已处理)\n14,12%'},
	                {value:12, name:'行为习惯\n(已处理)\n12,12%'},
	                {value:18, name:'严重拖堂\n(已处理)\n18,12%'},
	            ],
	        }]
		},{
		    title : {
		        text: 'C86校区',
				x:"center",y:0,
				textStyle:{
				    fontWeight:"500",
					fontFamily:"Microsoft YaHei",
					fontSize:"20"
				}
		    },
		    series:[{
	            type:'pie',
	            radius:'40%',
	            center:['50%','50%'],
	            data:[
	                {value:1, name:'校务后勤\n(未处理)\n1,12%'},
	                {value:14, name:'校务后勤\n(已处理)\n14,12%'},
	                {value:12, name:'教学部\n(已处理)\n12,12%'},
	                {value:18, name:'德育部\n(已处理)\n18,12%'},
	            ],
	        }]
		},{
		    title : {
		        text: '七彩校区',
				x:"center",y:0,
				textStyle:{
				    fontWeight:"500",
					fontFamily:"Microsoft YaHei",
					fontSize:"20"
				}
		    },
		    series:[{
	            type:'pie',
	            radius:'40%',
	            center:['50%','50%'],
	            data:[
	                {value:1, name:'环境问题\n(未处理)\n1,12%'},
	                {value:14, name:'环境问题\n(已处理)\n14,12%'},
	                {value:12, name:'行为习惯\n(已处理)\n12,12%'},
	                {value:18, name:'严重拖堂\n(已处理)\n18,12%'},
	            ],
	        }]
		},{
		    title : {
		        text: '七彩校区',
				x:"center",y:0,
				textStyle:{
				    fontWeight:"500",
					fontFamily:"Microsoft YaHei",
					fontSize:"20"
				}
		    },
		    series:[{
	            type:'pie',
	            radius:'40%',
	            center:['50%','50%'],
	            data:[
	                {value:1, name:'校务后勤\n(未处理)\n1,12%'},
	                {value:14, name:'校务后勤\n(已处理)\n14,12%'},
	                {value:12, name:'教学部\n(已处理)\n12,12%'},
	                {value:18, name:'德育部\n(已处理)\n18,12%'},
	            ],
	        }]
		},{
		    title : {
		        text: '其他校区',
				x:"center",y:0,
				textStyle:{
				    fontWeight:"500",
					fontFamily:"Microsoft YaHei",
					fontSize:"20"
				}
		    },
		    series:[{
	            type:'pie',
	            radius:'40%',
	            center:['50%','50%'],
	            data:[
	                {value:0, name:'环境问题\n(未处理)\n0,0%'},
	                {value:0, name:'环境问题\n(已处理)\n0,0%'},
	                {value:0, name:'行为习惯\n(已处理)\n0,0%'},
	                {value:0, name:'严重拖堂\n(已处理)\n0,0%'},
	            ],
	        }]
		},{
		    title : {
		        text: '其他校区',
				x:"center",y:0,
				textStyle:{
				    fontWeight:"500",
					fontFamily:"Microsoft YaHei",
					fontSize:"20"
				}
		    },
		    series:[{
	            type:'pie',
	            radius:'40%',
	            center:['50%','50%'],
	            data:[
	                {value:0, name:'校务后勤\n(未处理)\n0,0%'},
	                {value:0, name:'校务后勤\n(已处理)\n0,0%'},
	                {value:0, name:'教学部\n(已处理)\n0,0%'},
	                {value:0, name:'德育部\n(已处理)\n0,0%'},
	            ],
	        }]
		}]
	},
	mounted:function() {
		for(i in this.chartOpts){
			this.charts.push(echarts.init(document.querySelector('#chart_'+i),"candf"));
		}
		this.init();
		this.drawCharts();
	},
	methods:{
		init() {
			// if(new Date().getHours() < 22){
            //     this.canSaveAsPng = true;
			// 	this.btn_text = "22点后可保存为日报图片"
            // }
			this.chartToggleShow();
			if(this.is_mobile == "from_mobile"){
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				$("#main").css({"width":"1920px"});
			}
			this.ajaxGetData();
		},
		chartToggleShow() {
			if(this.chart_type[0] == "0"){
				$("#chart_1").show();
				$("#chart_2").hide();
			}else{
				$("#chart_2").show();
				$("#chart_1").hide();
			}
			if(this.chart_type[1] == "0"){
				$("#chart_3").show();
				$("#chart_4").hide();
			}else{
				$("#chart_4").show();
				$("#chart_3").hide();
			}
			if(this.chart_type[2] == "0"){
				$("#chart_5").show();
				$("#chart_6").hide();
			}else{
				$("#chart_6").show();
				$("#chart_5").hide();
			}
		},
		drawCharts() {
			for(i in this.charts){
				this.charts[i].setOption(this.chartOpts[i]);
			}
		},
		editRow(mark,id) {
			this.form.mark = mark;
			this.form.id = id;
			this.dialog_show = true;
		},
		downloadAsPng() {
			const loading = this.$loading({
				lock: true,
				text: 'Loading',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			});
			$("#export-btn-box").hide();
			let oDiv = document.querySelector("#main");
			let opts = {
				scale: 1,
				canvas: document.createElement("canvas"),
				logging: false,
		        width: oDiv.offsetWidth,
		        height: oDiv.offsetHeight,
			};
			html2canvas(oDiv,opts).then(function(canvas) {
				let img_url = canvas.toDataURL('image/jpeg', 0.95);
				if(main.is_mobile == "from_mobile"){
					$("#main").hide();
					$("#export-img").attr("src",img_url);
					$("#export-img").css({'display':"block"});
					$("body").css({"background":"#333"});
				}else{
					main.doDownload('daily.png',img_url);
				}
				$("#export-btn-box").show();
				loading.close();
			});
		},
		doDownload(filename,content) {
		    const save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
		    save_link.href = content;
		    save_link.download = filename;
		    const event = document.createEvent('MouseEvents');
		    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
		    save_link.dispatchEvent(event);
		},
		handlePickerChange() {
			let url = "{{URL::asset('admin/xc_report?date=')}}" + this.date;
			window.location.href = url;
		},
		submitMark() {
			let params = this.form;
			let url = "{{URL::asset('admin/xc_report/edit_mark')}}";
			$.post(url,params,function(res) {
				if(res.code == 1){
					$(".mark_"+main.form.id).html(main.form.mark);
					main.$notify({title:"Success",message:res.msg,type:"success"});
					main.dialog_show = false;
				}else{
					main.$notify.error({title:"Error",message:res.msg});
				}
			});
		},
		ajaxGetData() {
			let url = "{{URL::asset('admin/xc_report/get_chart_data')}}";
			let params = {
				_token:"{{ csrf_token() }}",
				date:this.date,
			}
			$.post(url,params,function(res){
				if(res.code == 1){
					main.chartOpts[0].xAxis.data = res.data.x_data;
					main.chartOpts[0].series = res.data.series_0;
					main.chartOpts[0].legend.data = res.data.legend_0;
					main.chartOpts[1].series[0].data = res.data.series_1;
					main.chartOpts[2].series[0].data = res.data.series_2;
					main.chartOpts[3].series[0].data = res.data.series_3;
					main.chartOpts[4].series[0].data = res.data.series_4;
					main.chartOpts[5].series[0].data = res.data.series_5;
					main.chartOpts[6].series[0].data = res.data.series_6;
					main.chartOpts[1].color = res.data.color_1;
					main.chartOpts[2].color = res.data.color_2;
					main.chartOpts[3].color = res.data.color_3;
					main.chartOpts[4].color = res.data.color_4;
					main.chartOpts[5].color = res.data.color_5;
					main.chartOpts[6].color = res.data.color_6;
					main.drawCharts();
					if(main.is_mobile == "from_mobile"){
						setTimeout(function(){
							main.downloadAsPng();
						},1500);
					}
				}else{
					main.$toast(res.msg);
				}
			});
		}
	}
});

</script>
</html>
